fix(tests): stabilize webkit keyboard handler tests with programmatic cursor positioning by nperez0111 · Pull Request #2746 · TypeCellOS/BlockNote

nperez0111 · 2026-05-14T06:04:41Z

Summary

Fixes flaky WebKit Playwright test failures in keyboard handler tests (keyboardhandlers.test.ts). These tests were failing intermittently on Linux WebKit CI but never on Chromium or Firefox.

Root Cause

When ArrowUp navigates the cursor between blocks at different indentation levels, the browser maps the visual X coordinate from the source line into the target line. If the target block is more indented (starts further right), the end-of-text X from a shallower block falls mid-text in the deeper block, causing the cursor to land before the end of the line.

This is correct browser behavior (ArrowUp preserves visual X position), not a bug. The cursor position is also slightly non-deterministic due to sub-pixel rendering, varying by 1 character position between runs.

Why only some tests are affected

Same indentation: ArrowUp between blocks at the same indent level works fine -- both blocks start at the same X, so end-of-text maps to end-of-text.
Deep → shallow (more indented → less indented): Also fine -- the higher X from the deeper block maps to at-or-beyond the end of the shallower block's text, so browsers clamp to the end.
Shallow → deep (less indented → more indented): Broken -- the shallower block's end-of-text X falls short of the deeper block's end, landing mid-text.

Why only WebKit on Linux CI

Tested all 3 browsers on macOS -- both Chromium and WebKit land mid-text in the affected cases (Firefox always clamps to line end). Linux Chromium appears to handle this differently (always landing at line end), which is why only Linux WebKit exhibited the flakiness.

Why not use keyboard shortcuts (End, Meta+Arrow) instead?

Tested across all 3 browsers:

End key: doesn't work in WebKit (cursor stays put)
Home key: doesn't work in Firefox or WebKit
Meta+ArrowRight/Left: works on macOS but maps to Ctrl+Arrow on Linux (word jump, not line end)

No single keyboard shortcut reliably moves to line start/end across all browsers and platforms.

Fix

Added two helper functions in tests/src/utils/editor.ts:

moveCursorToBlockEnd(page) -- programmatically sets cursor to end of current block via BlockNote API
moveCursorToBlockStart(page) -- programmatically sets cursor to start of current block via BlockNote API

These use editor.setTextCursorPosition(block, "end"/"start") which is deterministic and browser-independent. Applied to the 6 tests that navigate across different indentation levels before pressing Delete/Backspace.

Tests modified

Test	Issue	Fix
Backspace at the start of a block	Flaky heading→paragraph conversion	`moveCursorToBlockStart`
Backspace preserves nested blocks	ArrowUp x2 across indent levels	`moveCursorToBlockStart`
Delete end of block with multiple children	ArrowUp x2 shallow→deep	`moveCursorToBlockEnd`
Delete end of block with nested children	ArrowUp x2 shallow→deep	`moveCursorToBlockEnd`
Delete before shallower block	ArrowUp shallow→deep	`moveCursorToBlockEnd`
Delete before shallower block with children	ArrowUp x2 shallow→deep	`moveCursorToBlockEnd`

… cursor positioning ArrowUp in WebKit (especially Linux) can position the cursor incorrectly when crossing blocks with different indentation levels, causing Delete/ Backspace tests to fail intermittently. Replace unreliable keyboard navigation (ArrowUp, Control+ArrowLeft, ControlOrMeta+ArrowLeft/Right) with programmatic cursor positioning via BlockNote's setTextCursorPosition API.

vercel · 2026-05-14T06:04:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	May 14, 2026 6:06am
blocknote-website	Ready	Preview	May 14, 2026 6:06am

coderabbitai · 2026-05-14T06:04:55Z

📝 Walkthrough

Walkthrough

This PR adds two new Playwright test utilities that programmatically position the cursor at the start or end of the current block in BlockNote, then updates six keyboard handler end-to-end tests to use these helpers instead of keyboard shortcut sequences for cursor navigation before testing backspace and delete behaviors.

Changes

Test Helper Utilities

Layer / File(s)	Summary
New cursor positioning helpers `tests/src/utils/editor.ts`	Two exported async functions `moveCursorToBlockStart` and `moveCursorToBlockEnd` use `page.evaluate` to access the BlockNote editor instance and call `setTextCursorPosition` with `"start"` or `"end"` parameters to move the cursor within the current block.
Keyboard handler test updates `tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts`	Import statement expanded to include the new cursor helpers, and six keyboard handler tests ("Backspace at the start of a block", "Backspace preserves nested blocks", "Delete end of a block with multiple/nested children", "Delete before shallower block" scenarios) replace keyboard-based cursor movement with calls to `moveCursorToBlockStart` or `moveCursorToBlockEnd` before performing backspace or delete actions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

matthewlipski

Poem

🐰 Hop hop, the tests now leap with grace,
New helpers guide the cursor's place—
No arrow keys to stumble through,
Just BlockNote's API, tried and true!
Keyboard tests dance, cleaner than before. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically identifies the main change: stabilizing flaky tests in webkit keyboard handlers through programmatic cursor positioning.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description comprehensively documents the root cause, testing methodology, and specific fix with detailed rationale and test modifications table.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/webkit-keyboard-handler-flaky-tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-05-14T06:07:24Z

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2746

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2746

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2746

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2746

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2746

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2746

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2746

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2746

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2746

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2746

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2746

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2746

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2746

commit: 4eaad89

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts (1)
241-254: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add moveCursorToBlockEnd to stabilize these Delete tests for WebKit.

Three tests use ArrowUp after creating nested blocks with Tab, then immediately invoke Delete. The WebKit issue (cursor positioning when crossing indentation levels) affects these exact patterns, yet they weren't updated with cursor helpers in the same commit that fixed similar tests:

"Check Delete end of block with inline content child" (line 250)

"Check Delete end of block with image child" (line 263)

"Check Delete end of block with table child" (line 275)

Compare with nearby tests added in the same commit (deleteMultipleChildren, deleteNestedChildren, deleteShallowerBlock) which all use await moveCursorToBlockEnd(page); before Delete. Apply the same pattern here to match the established fix and prevent intermittent WebKit failures.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts` around lines
241 - 254, The three failing tests ("Check Delete end of block with inline
content child", "Check Delete end of block with image child", "Check Delete end
of block with table child") perform ArrowUp then Delete and need stabilization
for WebKit: insert await moveCursorToBlockEnd(page); after the ArrowUp keypress
(and before page.keyboard.press("Delete")) in each test so the cursor is
reliably placed at the block end; keep the rest of the flow (Tab,
insertParagraph, ArrowUp, Delete, compareDocToSnapshot) unchanged and reference
the helper moveCursorToBlockEnd(page) used by nearby tests.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts`:
- Around line 241-254: The three failing tests ("Check Delete end of block with
inline content child", "Check Delete end of block with image child", "Check
Delete end of block with table child") perform ArrowUp then Delete and need
stabilization for WebKit: insert await moveCursorToBlockEnd(page); after the
ArrowUp keypress (and before page.keyboard.press("Delete")) in each test so the
cursor is reliably placed at the block end; keep the rest of the flow (Tab,
insertParagraph, ArrowUp, Delete, compareDocToSnapshot) unchanged and reference
the helper moveCursorToBlockEnd(page) used by nearby tests.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a489c3b3-8f65-47be-aa93-3ee64e9739a0

📥 Commits

Reviewing files that changed from the base of the PR and between d5bad9d and 4eaad89.

📒 Files selected for processing (2)

tests/src/end-to-end/keyboardhandlers/keyboardhandlers.test.ts
tests/src/utils/editor.ts

vercel Bot deployed to Preview – blocknote-website May 14, 2026 06:06 View deployment

coderabbitai Bot reviewed May 14, 2026

View reviewed changes

nperez0111 merged commit f94e464 into main May 14, 2026
32 checks passed

nperez0111 deleted the fix/webkit-keyboard-handler-flaky-tests branch May 14, 2026 06:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(tests): stabilize webkit keyboard handler tests with programmatic cursor positioning#2746

fix(tests): stabilize webkit keyboard handler tests with programmatic cursor positioning#2746
nperez0111 merged 1 commit into
mainfrom
fix/webkit-keyboard-handler-flaky-tests

nperez0111 commented May 14, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 14, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 14, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented May 14, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

nperez0111 commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root Cause

Why only some tests are affected

Why only WebKit on Linux CI

Why not use keyboard shortcuts (End, Meta+Arrow) instead?

Fix

Tests modified

Uh oh!

vercel Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

nperez0111 commented May 14, 2026 •

edited

Loading

vercel Bot commented May 14, 2026 •

edited

Loading

coderabbitai Bot commented May 14, 2026 •

edited

Loading

pkg-pr-new Bot commented May 14, 2026 •

edited

Loading